<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>MonkeyCMS</title>
    <link type="text/css" rel="stylesheet" href="statics/css/monkey.css"/>
    <link type="text/css" rel="stylesheet" href="statics/css/frame.css"/>
    <script type="text/javascript" src="statics/js/jquery.min.js"></script>
    <script type="text/javascript" src="statics/js/prettify.js"></script>
    <script type="text/javascript" src="statics/js/monkey.js"></script>

</head>

<body>
<!--page_header-->
<div class="page_header">
    <h3>通用表格</h3>

    <p>通用表格组件，可带表头表尾，用于显示各类数据。</p>
</div>
<!--/page_header-->

<!--page_main-->
<div class="page_main">

<!--正常表格-->
<h4>正常表格</h4>
<!--示例-->
<table class="u_table">
    <thead>
    <tr>
        <th>创建时间</th>
        <th>名称<em class="f_fwn"> | </em>交易号</th>
        <th>对方</th>
        <th>金额<em class="f_fwn"> | </em>明细</th>
        <th>状态</th>
        <th>操作</th>
        <th>备注</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td class="u_table_action u_table_selected">Data</td>
        <td>Data</td>
    </tr>
    <tr class="u_table_split">
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td class="u_table_action">Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td class="u_table_action">Data</td>
        <td>Data</td>
    </tr>
    <tr class="u_table_split">
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td class="u_table_action">Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td class="u_table_action">Data</td>
        <td>Data</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="7">表尾数据</td>
    </tr>
    </tfoot>
</table>
<!--/示例-->

<h5>代码：</h5>
<!--代码-->
	<pre class="prettyprint linenums">
&lt;table class="u_table"&gt;
&lt;thead&gt;
&lt;tr&gt;
  &lt;th&gt;创建时间&lt;/th&gt;
  &lt;th&gt;名称&lt;em class="f_fwn"&gt; | &lt;/em&gt;交易号&lt;/th&gt;
  &lt;th&gt;对方&lt;/th&gt;
  &lt;th&gt;金额&lt;em class="f_fwn"&gt; | &lt;/em&gt;明细&lt;/th&gt;
  &lt;th&gt;状态&lt;/th&gt;
  &lt;th&gt;操作&lt;/th&gt;
  &lt;th&gt;备注&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td class="u_table_action u_table_selected"&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="u_table_split"&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td class="u_table_action"&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td class="u_table_action"&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="u_table_split"&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td class="u_table_action"&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
  &lt;td class="u_table_action"&gt;Data&lt;/td&gt;
  &lt;td&gt;Data&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;tfoot&gt;
&lt;tr&gt;
  &lt;td colspan="7"&gt;表尾数据&lt;/td&gt;
&lt;/tr&gt;
&lt;/tfoot&gt;
&lt;/table&gt;</pre>
<!--/代码-->
<!--/正常表格-->

<!--无边框的表格-->
<h4>无边框的表格</h4>
<!--示例-->
<table class="u_table u_table_noborder">
    <tbody>
    <tr>
        <td>1</td>
        <td>吴实</td>
        <td>
            <p>电话：13000111222</p>

            <p>地址：浙江省杭州市西湖区晚唐路567号</p>
        </td>
        <td>操作</td>
    </tr>
    <tr class="u_table_split">
        <td>2</td>
        <td>吴实</td>
        <td>
            <p>电话：13000111222</p>

            <p>地址：浙江省杭州市西湖区晚唐路567号</p>
        </td>
        <td>操作</td>
    </tr>
    <tr>
        <td>3</td>
        <td>吴实</td>
        <td>
            <p>电话：13000111222</p>

            <p>地址：浙江省杭州市西湖区晚唐路567号</p>
        </td>
        <td>操作</td>
    </tr>
    <tr class="u_table_split">
        <td>4</td>
        <td>吴实</td>
        <td>
            <p>电话：13000111222</p>

            <p>地址：浙江省杭州市西湖区晚唐路567号</p>
        </td>
        <td>操作</td>
    </tr>
    </tbody>
</table>
<!--/示例-->

<h5>代码：</h5>
<!--代码-->
	<pre class="prettyprint linenums">
&lt;table class="u_table u_table_noborder"&gt;
&lt;tbody&gt;
&lt;tr&gt;
  &lt;td&gt;1&lt;/td&gt;
  &lt;td&gt;吴实&lt;/td&gt;
  &lt;td&gt;
    &lt;p&gt;电话：13000111222&lt;/p&gt;
    &lt;p&gt;地址：浙江省杭州市西湖区晚唐路567号&lt;/p&gt;
  &lt;/td&gt;
  &lt;td&gt;操作&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="u_table_split"&gt;
  &lt;td&gt;2&lt;/td&gt;
  &lt;td&gt;吴实&lt;/td&gt;
  &lt;td&gt;
    &lt;p&gt;电话：13000111222&lt;/p&gt;
    &lt;p&gt;地址：浙江省杭州市西湖区晚唐路567号&lt;/p&gt;
  &lt;/td&gt;
  &lt;td&gt;操作&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
  &lt;td&gt;3&lt;/td&gt;
  &lt;td&gt;吴实&lt;/td&gt;
  &lt;td&gt;
    &lt;p&gt;电话：13000111222&lt;/p&gt;
    &lt;p&gt;地址：浙江省杭州市西湖区晚唐路567号&lt;/p&gt;
  &lt;/td&gt;
  &lt;td&gt;操作&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="u_table_split"&gt;
  &lt;td&gt;4&lt;/td&gt;
  &lt;td&gt;吴实&lt;/td&gt;
  &lt;td&gt;
    &lt;p&gt;电话：13000111222&lt;/p&gt;
    &lt;p&gt;地址：浙江省杭州市西湖区晚唐路567号&lt;/p&gt;
  &lt;/td&gt;
  &lt;td&gt;操作&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</pre>
<!--/代码-->
<!--/无边框的表格-->


<!--组合表格-->
<h4>组合表格</h4>
<!--示例-->
<div class="u_box">
    <div class="u_box_head">
        <div class="u_box_head_border">
            <h3 class="u_box_head_title">区块标题</h3>
            <span class="u_box_head_text">其他文字</span>
            <a href="#" class="u_box_head_more">更多</a>
        </div>
    </div>
    <div class="u_box_container">

        <table class="u_table u_table_inbox">
            <thead>
            <tr>
                <th>创建时间</th>
                <th>名称<em class="f_fwn"> | </em>交易号</th>
                <th>对方</th>
                <th>金额<em class="f_fwn"> | </em>明细</th>
                <th>状态</th>
                <th>操作</th>
                <th>备注</th>
            </tr>
            </thead>
            <!-- 表头可选 -->
            <tbody>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td class="u_table_action">Data</td>
                <td>Data</td>
            </tr>
            <tr class="u_table_split">
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td class="u_table_action">Data</td>
                <td>Data</td>
            </tr>
            </tbody>
        </table>

    </div>
</div>


<!--/示例-->

<h5>代码：</h5>
<!--代码-->
	<pre class="prettyprint linenums">
&lt;div class="u_box"&gt;
  &lt;div class="u_box_head"&gt;
    &lt;div class="u_box_head_border"&gt;
      &lt;h3 class="u_box_head_title"&gt;区块标题&lt;/h3&gt;
      &lt;span class="u_box_head_text"&gt;其他文字&lt;/span&gt;
      &lt;a href="#" class="u_box_head_more"&gt;更多&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="u_box_container"&gt;

    &lt;table class="u_table u_table_inbox"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;创建时间&lt;/th&gt;
          &lt;th&gt;名称&lt;em class="f_fwn"&gt; | &lt;/em&gt;交易号&lt;/th&gt;
          &lt;th&gt;对方&lt;/th&gt;
          &lt;th&gt;金额&lt;em class="f_fwn"&gt; | &lt;/em&gt;明细&lt;/th&gt;
          &lt;th&gt;状态&lt;/th&gt;
          &lt;th&gt;操作&lt;/th&gt;
          &lt;th&gt;备注&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;Data&lt;/td&gt;
          &lt;td&gt;Data&lt;/td&gt;
          &lt;td&gt;Data&lt;/td&gt;
          &lt;td&gt;Data&lt;/td&gt;
          &lt;td&gt;Data&lt;/td&gt;
          &lt;td class="u_table_action"&gt;Data&lt;/td&gt;
          &lt;td&gt;Data&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="u_table_split"&gt;
          &lt;td&gt;Data&lt;/td&gt;
          &lt;td&gt;Data&lt;/td&gt;
          &lt;td&gt;Data&lt;/td&gt;
          &lt;td&gt;Data&lt;/td&gt;
          &lt;td&gt;Data&lt;/td&gt;
          &lt;td class="u_table_action"&gt;Data&lt;/td&gt;
          &lt;td&gt;Data&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
<!--/代码-->
<!--/组合表格-->

</div>
<!--/page_main-->
</body>
</html>